<template>
	<view class="page">
		<view class="top-bar">
			<view class="top-bar-title">
				我的
			</view>
			<view class="top-bar-info">
				<view class="top-bar-info-contain">
					<view class="top-bar-info-img">
						<image v-if="userInfo.accountHead" class="top-bar-info-img" :src="userInfo.accountHead" mode=""></image>

						<image v-else class="top-bar-info-img" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/nologinaccount.png"
						 mode=""></image>
					</view>
					<view v-if="identityFlag==='expert'" class="expert_info">
						<view class="expert_info-top">
							<text class="expert_info-top-name">{{userInfo.realName}}</text>
							<text class="expert_info-top-title">{{jobTitle}}</text>
							<image class="top-bar-info-vip" :src="userInfo.vipLevelIcon" mode="widthFix"></image>

							<!-- <text class="expert_info-top-title">副教授</text> -->
						</view>
						<view class="expert_info-com">
							<text>{{userInfo.workUnit}}</text>
						</view>
						<view v-show="userInfo.identity" class="expert_info-id">
							<block>
								<text class="expert_info-id-info" v-for="(item,index) in identity" :key="index">{{item}}</text>
								<text class="expert_info-id-info" v-if="userInfo.type==2">机构</text>
							</block>
						</view>
					</view>
					<view v-if="identityFlag==='org'" class="org_info">
						<view class="org_info-top my-info-org-name">
							<text class="expert_info-top-name">{{orgData.realName}}</text>
							<!-- <text class="expert_info-top-title">{{orgData.companyTypeLabel||''}}</text> -->

							<image class="top-bar-info-vip" :src="userInfo.vipLevelIcon" mode="widthFix"></image>
						</view>
						<view class="expert_info-com">
							<text>{{orgData.companyTypeLabel||''}}</text>
						</view>
						<!-- <view class="org_info-loca">
							<span v-if="userInfo.provinceName&&userInfo.cityName">{{userInfo.provinceName||''+' '+userInfo.cityName||''}}</span>
						</view> -->
						<view class="expert_info-id org_info_id">
							<block>
								<text class="expert_info-id-info" v-for="(item,index) in identity" :key="index">{{item}}</text>
								<text class="expert_info-id-info">机构</text>
							</block>
						</view>
					</view>
					<view v-if="identityFlag==='self'" class="org_info">
						<view class="org_info-top">
							<text class="expert_info-top-name">{{showPhoneNumber}}</text>
							<text class="expert_info-top-title">{{userInfo.jobDuties||''}}</text>
							<image class="top-bar-info-vip" :src="userInfo.vipLevelIcon" mode="widthFix"></image>
						</view>
						<view class="expert_info-com">
							<text>{{userInfo.workUnit||''}}</text>
						</view>
					</view>
					<!-- @click="toLogin" -->
					<!-- open-type="getUserInfo" -->
					<button v-show="!identityFlag" @click="toLogin" class="top-bar-info-login">
						登录/注册
					</button>
				</view>
				<!-- @click="toLogin" -->
				<view @click="toPerson" class="more_quan">
					<!-- <text style="color: #FFFFFF;font-size: 20px;" class="icon iconfont iconxiugai"></text> -->
					<view class="my-info-2">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/my-info-2.png"></image>
					</view>
				</view>

			</view>
			<!-- <button @getphonenumber="getphonenumber" open-type="getphonenumber" class="header-left-login-title" plain="true">点击登录</button> -->
			<view class="top-bar-detail-contain">
				<view class="top-bar-detail-info">
					<view @click="toMyAttention" class="top-bar-detail-info-item">
						<view class="top-bar-detail-info-item-score">{{attentionCount || '0'}}</view>
						<view class="top-bar-detail-info-item-title">关注</view>
					</view>
					<view class="line"></view>
					<view class="top-bar-detail-info-item" @click="toMyCollect">
						<view class="top-bar-detail-info-item-score">{{collectCount || '0'}}</view>
						<view class="top-bar-detail-info-item-title">收藏</view>
					</view>
					<view class="line"></view>
					<view class="top-bar-detail-info-item" @click="toMyFootPrint">
						<view class="top-bar-detail-info-item-score">{{footprintCount}}</view>
						<view class="top-bar-detail-info-item-title">足迹</view>
					</view>
				</view>
			</view>
		</view>
		<view class="quick-contain">
			<view class="quick-contain-item" @click="toOrder">
				<!-- <view style="color: #7CAFFB;font-size: 46upx;" class="icon iconfont icontixing"></view> -->
				<image class="quick-item-icon" style="width: 38upx;" src="https://www.innovationgloble.com/wxs/img/wx/dingdan.png"
				 mode="heightFix"></image>
				<view class="quick-contain-item-title">
					我的订单
				</view>
			</view>
			<view class="quick-contain-item" @click="gotomyEnter">
				<image class="quick-item-icon" style="width: 44upx;" src="https://www.innovationgloble.com/wxs/img/wx/apply.png"
				 mode="heightFix"></image>
				<view class="quick-contain-item-title">
					我的报名
				</view>
			</view>
			<view class="quick-contain-item" @click="goIntegralDetail">
				<image class="quick-item-icon" style="width: 41upx;" src="https://www.innovationgloble.com/wxs/img/wx/integral.png"
				 mode="heightFix"></image>
				<view class="quick-contain-item-title">
					我的积分
				</view>
			</view>
			<view class="quick-contain-item no-mar" @click="goInvite">
				<image class="quick-item-icon" style="width: 53upx;" src="https://www.innovationgloble.com/wxs/img/wx/invite.png"
				 mode="heightFix"></image>
				<view class="quick-contain-item-title">
					邀请好友
				</view>
			</view>
		</view>
		<view class="option-area">
			<view class="option-area-item" @click="toVerify">
				<view class="option-area-item-title">
					<view style="margin-right: 22upx;font-size: 33upx;color: #4A4A4A;" class="icon iconfont iconkefujingli-"></view>
					用户认证
				</view>
				<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
			</view>
			<view class="option-area-item" @click="goChat">
				<view class="option-area-item-title">
					<view style="margin-right: 22upx;font-size: 31upx;color: #4A4A4A" class="icon iconfont iconkefu"></view>
					在线客服
				</view>
				<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
			</view>
			<view class="option-area-item" @click="toUpdatePhone">
				<view class="option-area-item-title">
					<view style="margin-right: 22upx;font-size: 31upx;color: #4A4A4A" class="icon iconfont iconxiugai"></view>
					修改手机号
				</view>
				<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
			</view>
			<view class="option-area-item no-bottom" @click="goAbout">
				<view class="option-area-item-title">
					<view style="margin-right: 22upx;font-size: 31upx;color: #4A4A4A" class="icon iconfont iconwomen"></view>
					关于我们
				</view>
				<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
			</view>
		</view>
		<view v-if="userInfo.userId" class="logout-class">
			<view @click="logout" class="logout-class-btn">
				退出登录
			</view>
		</view>
		<view class="no-login" v-if="!hasLogin" @click="toLogin"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		permissionJudge
	} from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				key: "value",
				statusBarHeight: 0,
				userInfoDetail: {},
				identity: [],
				identityFlag: '',
				showPhoneNumber: '',
				// 项目 活动  订单  积分
				myContentCount: {},
				integralCount: 0,
				// 关注 收藏  足迹
				attentionCount: 0,
				collectCount: 0,
				footprintCount: 0,
				jobTitle: '',
				orgData: {}
			}
		},
		onShow() {
			try {
				const userInfo = uni.getStorageSync('userInfo');
				const permList = uni.getStorageSync('permList');
				console.log('是否为主账号', uni.getStorageSync('mainAccount'))
				const mainAccount = uni.getStorageSync('mainAccount');
				if (userInfo) {
					this.saveUserInfo(userInfo);
					this.setPermList(permList);
					// this.setMainAccount(mainAccount)
					this.setChatLogin(true);
					this.identity = userInfo.identity ? userInfo.identity.split(',') : [];
					if (this.identity.length > 0 && ((userInfo.identity.indexOf('专家') != -1 && userInfo.type == 1) || (userInfo.identity
							.indexOf('经纪人') != -1 && userInfo.type == 1))) {
						this.identityFlag = 'expert';
						this.selectMyExperInfo()
					}
					if (this.userInfo.type == 2) {
						this.identityFlag = 'org'
						this.selectUserById()
					}
					if ((!userInfo.identity) && userInfo.type == 1) {
						this.identityFlag = 'self';
						let arr = [...userInfo.phoneNumber];

						for (let i = 0; i < arr.length; i++) {
							if (i > 2 && i < 7) {
								arr[i] = "*"
							}
						}
						if (userInfo.realName) {
							this.showPhoneNumber = userInfo.realName
						} else {
							this.showPhoneNumber = ("用户" + arr.join(''));
						}

					}
					this.fetchData();
				} else {
					this.clearAll();
				}
			} catch (e) {
				this.clearAll();
			}
			if (this.hasLogin) {
				// 关注
				this.reqAttention();
				// 收藏
				this.reqCollect();
				// 足迹
				this.reqFooterprint();
			}
		},
		computed: {
			...mapState('userStore', ['userInfo', 'hasLogin']),
			...mapState('chatStore', ['hasLogin']),
		},
		methods: {
			...mapMutations('chatStore', ['setChatLogin']),
			...mapMutations('userStore', ['saveUserInfo', 'clearUserInfo', 'setPermList', 'setMainAccount']),
			//获取专家个人信息
			selectMyExperInfo() {
				this.$request.get({
					url: 'ExpertInfo/selectMyExperInfo',

				}).then(res => {
					if (res) {
						this.jobTitle = res.jobTitle
					}
				})
			},
			//获取机构信息
			selectUserById() {
				this.$request.get({
					url: 'user/selectUserById',

				}).then(res => {

					this.orgData = res
				})
			},


			goInvite() {
				uni.navigateTo({
					url: "/pages/invite/invite"
				});
			},
			reqAttention() {
				this.$request.get({
					url: 'userFollow/selectAll',
					data: {
						pageSize: 10,
						pageNum: 1,
					},
					force: false
				}).then(res => {
					this.attentionCount = res.total;
				})
			},
			reqCollect() {
				this.$request.get({
					url: 'userCollection/selectAll',
					data: {
						pageSize: 10,
						pageNum: 1,
					},
					force: false
				}).then(res => {
					this.collectCount = res.total;
				})
			},
			reqFooterprint() {
				this.$request.get({
					url: 'userBrower/selectAll',
					data: {
						pageSize: 10,
						pageNum: 1,
					},
					force: false
				}).then(res => {
					this.footprintCount = res.total;
				})
			},
			toVerify() {
				uni.navigateTo({
					url: '/pagesB/verify/verify'
				})
			},
			goIntegralDetail() {
				uni.navigateTo({
					url: "/pagesA/integral/integral"
				});
			},
			gotomyEnter() {
				if (!permissionJudge('web:activities:list')) {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: "/pagesB/my-enter/my-enter"
				});
			},
			//跳转到订单
			toOrder() {
				if (!permissionJudge('pay:order:list')) {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pagesB/my-order/my-order'
				})
			},
			goNotify() {
				uni.navigateTo({
					url: "/pagesA/message/notify"
				});
			},
			checkConnectWS() {
				const chatLogin = getApp().globalData.chatLogin;
				if (!chatLogin) {
					getApp().connectWS(this.userInfo);
				}
			},
			chatList() {
				uni.navigateTo({
					url: "/pagesA/chat-contactlist/chat-contactlist"
				});
			},
			toLogin(e) {
				uni.navigateTo({
					url: '/pagesA/login/login'
				})
			},
			setCode(params) {
				this.$request.get({
					url: 'setWXCode',
					data: params,
				}).then(info => {
					this.saveUserInfo(info);
				}, res => {});
			},
			getphonenumber(e) {
				this.silentLogin(params => {
					this.setCode(params);
				})
			},
			silentLogin() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								that.rawData = JSON.parse(infoRes.rawData);
							}
						});
					},
					fail: function(e) {}
				});
			},
			clearAll() {
				this.clearUserInfo();
				this.setChatLogin(false);
				this.identityFlag = '';
				this.attentionCount = 0;
				this.collectCount = 0;
				this.footprintCount = 0;
				this.showPhoneNumber = '';
			},
			logout() {
				this.clearAll();
				uni.hideTabBarRedDot({
					index: 2
				});
				getApp().closeSocket();
			},
			//项目 活动  订单  积分
			fetchData() {
				this.$request.get({
					url: 'user/getMyContentCount',
					data: {},
					force: false
				}).then(info => {
					this.myContentCount = info;
				}, res => {});
				this.$request.get({
					url: 'manager/UserAllIntegral/selectMyIntegral',
					data: {},
					force: false
				}).then(info => {
					this.integralCount = info;
				}, res => {});
			},
			toMyProject() {
				uni.navigateTo({
					url: '/pagesB/my-project/my-project'
				})
			},
			toPerson() {
				if (!this.userInfo || JSON.stringify(this.userInfo) === '{}') {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false
				}
				if (this.userInfo.type != 2) {
					uni.navigateTo({
						url: '/pagesB/personal-info/personal-info'
					})
				} else {
					uni.navigateTo({
						url: '/pagesB/agent-verify/agent-verify'
					})
				}
			},
			goChat() {
				uni.navigateTo({
					url: `/pagesA/chat-contactlist/chat?userId=85`
				})
			},
			toUpdatePhone() {
				uni.navigateTo({
					url: '/pagesB/update-phone/update-phone'
				})
			},
			toMyCollect() {
				if (!permissionJudge('user:collection:list')) {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pagesB/my-collect/my-collect'
				})
			},
			toMyAttention() {
				if (!permissionJudge('user:follow:list')) {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pagesB/my-attention/my-attention'
				})
			},
			toMyFootPrint() {
				if (!permissionJudge('user:history:list')) {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pagesB/my-footprint/my-footprint'
				})
			},
			goAbout() {
				uni.navigateTo({
					url: "/pagesA/about"
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.my-info-2 {
		width: 45upx;
		height: 45upx;

		image {
			width: 45upx;
			height: 45upx;
		}
	}

	.no-login {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		min-height: 100vh;
	}

	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #F8F8F8;
	}

	.top-bar {
		width: 100%;
		height: 484upx;
		/* border: 1px solid #007AFF; */
		/* position: fixed;
		top: 0;
		left: 0;
		right: 0; */
		bottom: unset;
		// background-color: #007AFF;
		background-image: url("https://www.innovationgloble.com/wxs/img/wx/mine_bg.png");
		background-size: 100%;
		padding-top: var(--status-bar-height);
		position: relative;
	}

	.top-bar-title {
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		height: 50upx;
		line-height: 50upx;
		margin-top: 20upx;
		/* padding-top: 20upx; */
		padding-left: 29upx;
	}

	.top-bar-info {
		margin-top: 60upx;
		padding: 0px 51upx 0px 49upx;
		/* border: 1px solid #000000; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top-bar-info-contain {
		display: flex;
	}

	.expert_info {
		margin-left: 34upx;
	}

	.org_info {
		margin-left: 34upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.org_info-top {
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
		line-height: 1;
		display: flex;
		align-items: center;
	}

	.org_info-loca {
		font-size: 22upx;
		height: 38upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-top: 10upx;
		color: rgba(255, 255, 255, 1);
	}

	.expert_info-top-name {
		max-width: 290upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
		line-height: 40upx;
	}

	.expert_info-top-title {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-left: 12upx;
	}

	.expert_info-com {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.expert_info-id-info {
		padding: 2upx 12upx;
		font-size: 18upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(42, 125, 250, 1);
		background: rgba(255, 255, 255, 1);
		border-radius: 8upx;
		margin-right: 6upx;
	}

	.org_info_id {
		line-height: 1.2;
	}

	.top-bar-info-img {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		/* background-color: #FFFFFF; */
		position: relative;
		display: flex;
		font-size: 140upx;
		justify-content: center;
		align-items: center;

		/* border: 1px solid #000000; */
	}

	.top-bar-info-vip {
		width: 60upx;
		margin-left: 20upx;
		height: 26upx;
	}

	.top-bar-info-img .icon {
		font-size: 140upx;
		border-radius: 50%;
		color: #586ABA;
	}

	button.top-bar-info-login {

		margin-top: 15upx;
		margin-left: 34upx;
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
		background-color: transparent !important;
		padding: 0upx;
	}

	button.top-bar-info-login::after {
		border: none !important;

	}

	.top-bar-detail-contain {
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: -65upx;
	}

	.top-bar-detail-info {
		width: 690upx;
		height: 169upx;
		border-radius: 20upx;
		background-color: #FFFFFF;
		display: flex;
		text-align: center;
		justify-content: space-evenly;
	}

	.top-bar-detail-info-item {
		margin-top: 20upx;
		flex: 1;
	}

	.line {
		margin-top: 62upx;
		width: 1px;
		height: 44upx;
		border-left: 1upx solid #EBEBEB;
	}

	.top-bar-detail-info-item-title {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		/* color: rgba(112, 112, 112, 1); */
		color: rgba(74, 74, 74, 1);
		margin-top: 0upx;
	}

	.top-bar-detail-info-item-score {
		font-size: 40upx;
		font-family: FFDINPro-Medium, FFDINPro;
		font-weight: 500;
		color: rgba(34, 0, 0, 1);
	}

	.quick-contain {
		margin: 86upx 30upx 20upx 30upx;
		/* padding: 50upx ; */
		border-radius: 20upx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
	}

	.quick-contain-item {
		width: 25%;
		/* margin-right: 80upx; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40upx 0upx 24upx 0upx;


	}

	.quick-item-icon {
		width: 45upx;
		height: 45upx;
	}

	.quick-contain-item-title {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(74, 74, 74, 1);
		line-height: normal;
		margin-top: 10upx;
	}

	.no-mar {
		margin-right: 0px;
	}

	.mar {
		margin-top: 42upx;
	}

	.option-area {
		margin: 0px 30upx 0upx 30upx;
		border-radius: 20upx;
		background-color: #ffffff;
		/* height: 301upx; */
	}

	.option-area-item {
		height: 99upx;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F2F2F2;
		margin: 0px 33upx;
	}

	.no-bottom {
		border-bottom: none;
	}

	.option-area-item-title {
		display: flex;
		align-items: center;
	}

	.more_quan {
		font-size: 26upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
	}

	.more_quan>.icon {
		vertical-align: middle;
	}

	.logout-class {
		margin: 20upx 30upx 0 30upx;
		padding-bottom: 20upx;
		background: #F8F8F8;
	}

	.logout-class-btn {
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
		border-radius: 20upx;
	}

	.my-info-org-name {
		width: 372upx;
	}
</style>
